<!-- 用户关系查询 -->
<template>
    <div>
        <div class="table-page-search-wrapper">
            <a-form layout="inline">
                <a-row :gutter="48">
                    <a-col :md="8" :sm="24">
                        <a-form-item label="上级用户手机号">
                            <a-input v-model="parentUserPhone" allow-clear placeholder="请输入上级用户手机号" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="下级用户手机号">
                            <a-input v-model="sonUserPhone" allow-clear placeholder="请输入下级用户手机号" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="上级用户ID">
                            <a-input v-model="parentUserIdSon" allow-clear placeholder="请输入上级用户ID" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="下级用户ID">
                            <a-input v-model="sonUserIdSon" allow-clear placeholder="请输入下级用户ID" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="层级">
                            <a-select v-model="level" placeholder="请选择" allowClear @change="getData">
                                <a-select-option v-for="(item,i) in 30" :key="i" :value="(item)">{{item}}层</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item >
                            <a-button style="margin-right: 20px" type="primary" @click="getData()">查询</a-button>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </div>

        <a-table rowKey="id" :loading="isload" @change="handleTableChange" :columns="(sonUserIdSon != '' || sonUserPhone != '') ? superiorColumns : (parentUserIdSon != '' || parentUserPhone != '') ? lowerColumns : columns" :data-source="dataList" :pagination="{ pageSize: 10, total: total ,showSizeChanger: true,pageSize: size}" size="small" >
            <div slot="level" slot-scope="level">
                <div>{{level}}层</div>
            </div>
        </a-table>
    </div>
</template>

<script>
import { columns , superiorColumns , lowerColumns } from './table';
import { queryUserRelation } from '@/api/member';
export default {
    props: {
        parent:{},
        brandId: {},
    },
    data () {
        return {
            userId: undefined,
            isload: false,
            dataList: [],
            size: 10,
            page: 1,
            total: 0,
            columns,
            superiorColumns,
            lowerColumns,
            parentUserPhone: '',
            sonUserPhone: '',
            parentUserIdSon: '',
            sonUserIdSon: '',
            level: undefined,
        };
    },
    watch:{
        parent: function(val,old){
            console.log(val)
            this.parentUserIdSon = val.parentUserId
            this.sonUserIdSon = val.sonUserId
            this.getData()
        },
    },
    mounted(){
        console.log('加载')
        this.parentUserIdSon = this.parent.parentUserId
        this.sonUserIdSon = this.parent.sonUserId
        this.getData()
    },
    methods: {
        getData(){
            let _this = this
            _this.isload = true
            const params = {
                'brandId':_this.brandId,
                'parentUserPhone':_this.parentUserPhone,
                'sonUserPhone':_this.sonUserPhone,
                'parentUserId':_this.parentUserIdSon,
                'sonUserId':_this.sonUserIdSon,
                'level':_this.level,
                'size':_this.size,
                'page':_this.page - 1,
            }
            queryUserRelation(params)
            .then(res=>{
                _this.isload = false
                if(res.success){
                    _this.dataList = res.data.content
                    _this.total = res.data.totalElements
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        // 分页
        handleTableChange(pagination, filters, sorter) {
            console.log(pagination);
            this.page = pagination.current;
            this.size = pagination.pageSize;
            this.getData()
        },
    }
}

</script>
<style scoped>

</style>